<template>
  <div class="video">
    <BaseVideo :id="'aaaaa'" :videoUrl="vsrc"></BaseVideo>
    <div class="rightBox" ref="bigBox">
      <ul class="lists">
        <li v-for="(item, i) in arrs" :class="activeIndex == i ? 'active' : ''" @click="playVideo(item, i)" v-slide-in>
          <div class="logo"
            :style="{ 'background': `url(${item.isrc}),url(${img}) no-repeat`, 'background-size': '100%' }">
            <svg-icon :color="color" v-if="activeIndex != i" name="play" width="50" height="50"></svg-icon>
            <svg-icon :color="color" v-else name="stop" width="50" height="50"></svg-icon>
          </div>
          <div class="title"> {{ item.title || '视频' }}</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="more">
    <div @click="backTop" title="返回顶部">
      <ToTopOutlined />
    </div>
    <div @click="moreData" title="上一页">
      <PlusCircleOutlined />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, watch } from 'vue'
import { ToTopOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import img from "@/assets/images/video.jpg"
import themeStore from '@/store/theme'
const themes = themeStore()
const color: any = ref(themes.$state.themeColor)
const arrs: any = reactive([])
const bigBox: any = ref(null)
const isrc = ref('')
const vsrc = ref('')
const activeIndex = ref(0)

const getVideo = async (init = false) => {
  for (let i = 0; i < 10; i++) {
    const num = Math.floor(Math.random() * 804 + 1)
    const obj3 = {
      isrc: '',
      vsrc: `https://cn-sy1.rains3.com/tc1/1%20(${num}).mp4`,
      title: '',
    }
    arrs.push(obj3)
  }
  if (vsrc.value == '') vsrc.value = arrs[0].vsrc
}

const playVideo = (item: any, i: number) => {
  activeIndex.value = i
  isrc.value = item.isrc
  vsrc.value = item.vsrc
}

const backTop = () => {
  bigBox.value.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
const moreData = () => {
  getVideo()
}

console.log();
watch(themes.$state, (value) => {
  color.value = value.themeColor
})

onMounted(async () => {
  getVideo(true)
})
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 300px;

  .rightBox {
    height: 100%;
    box-shadow: 0 0 5px rgba(128, 128, 128, 0.268);
    overflow-y: scroll;
    @include scroll-bar();

    .lists {
      list-style-type: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

      li {
        margin: 10px;
        height: 120px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(128, 128, 128, 0.268);
        cursor: pointer;
        transition: all 0.5s;

        .logo {
          width: 100%;
          height: calc(100% - 20px);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .title {
          padding: 0 5px;
          height: 20px;
          white-space: nowrap;
          /* 禁止换行 */
          overflow: hidden;
          /* 溢出隐藏 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }

        &:hover {
          background-color: var(--themeColor);
          color: white;
        }
      }
    }
  }

}

.active {
  background-color: var(--themeColor);
  color: white;
}

.more {
  z-index: 10;
  padding: 10px;
  position: fixed;
  bottom: 30px;
  right: 30px;

  div {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    margin: 10px 0;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    box-shadow:
      6px 6px 13px #bebebe,
      -6px -6px 13px #ffffff;
    color: blue;
    transition: all 0.5s;
    background-color: white;

    &:hover {
      color: white;
      background-color: var(--themeColor);
    }
  }
}
</style>
